<template>
  <div>
    <el-dialog width="50%" :title="title" :visible.sync="isOpen" @close="close">
      <el-row :gutter="0">
        <el-form ref="subQuForm" :model="formData" :rules="rules" size="medium" label-width="100px">
          <el-col :span="23">
            <el-form-item label="题目内容" prop="subContent">
              <el-input
                v-model="formData.subContent"
                type="textarea"
                placeholder="请输入题目内容"
                :maxlength="255"
                show-word-limit
                :autosize="{minRows: 2, maxRows: 4}"
                :style="{width: '100%'}"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="23">
            <el-form-item label="题目类型" prop="subType">
              <el-select
                v-model="formData.subType"
                placeholder="请选择题目类型"
                :style="{width: '100%'}"
              >
                <el-option
                  v-for="dict in dict.type.sub_qu_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="23">
            <el-form-item label="题目标签" prop="subTags">
              <el-select
                v-model="subTags"
                multiple
                filterable
                allow-create
                default-first-option
                placeholder="请输入题目标签(不超过两个)"
                @change="change"
                :style="{width: '100%'}"
              ></el-select>
            </el-form-item>
          </el-col>
          <el-col :span="23">
            <el-form-item label="难度等级" prop="subGrand">
              <el-rate v-model="formData.subGrand" show-score></el-rate>
              <el-tooltip
                style="margin-left:10px"
                effect="light"
                content="不填随机难度1~5"
                placement="right-start"
              >
                <i class="el-icon-question" />
              </el-tooltip>
            </el-form-item>
          </el-col>
          <el-col :span="23">
            <el-form-item label="答案" prop="subAnswer">
              <el-input
                v-model="formData.subAnswer"
                type="textarea"
                placeholder="请输入答案"
                :maxlength="512"
                show-word-limit
                :autosize="{minRows: 2, maxRows: 4}"
                :style="{width: '100%'}"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="23">
            <el-form-item label="答案解析" prop="subAnswerContent">
              <el-input
                v-model="formData.subAnswerContent"
                type="textarea"
                placeholder="请输入答案解析"
                :maxlength="512"
                show-word-limit
                :autosize="{minRows: 2, maxRows: 4}"
                :style="{width: '100%'}"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handleConfirm">添加/修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>
    <script>
import { addSubjective, updateSubjective } from "@/api/question/objAndSub";
export default {
  dicts: ["sub_qu_type"],
  inheritAttrs: false,
  name: "SubUpForm",
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ""
    },
    subInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      formData: {
        subContent: undefined,
        subType: 4,
        subGrand: 0,
        subAnswer: undefined,
        subAnswerContent: undefined
      },
      subTags: [],
      rules: {
        subContent: [
          {
            required: true,
            message: "题目内容不能为空",
            trigger: "blur"
          }
        ],
        subType: [
          {
            required: true,
            message: "请选择题目类型",
            trigger: "blur"
          }
        ],
        subTags: [
          {
            required: true,
            message: "题目标签不能为空",
            trigger: "blur"
          }
        ],
        subAnswer: [
          {
            required: true,
            message: "答案不能为空",
            trigger: "blur"
          }
        ]
      }
    };
  },
  computed: {
    /** 弹框是否打开 */
    isOpen: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      }
    }
  },
  methods: {
    close() {
      this.$emit("update:visible", false);
      this.formData = {
        subContent: undefined,
        subType: 4,
        subGrand: 0,
        subAnswer: undefined,
        subAnswerContent: undefined
      };
      this.subTags = [];
      this.resetForm("subQuForm");
    },
    handleConfirm() {
      this.$refs["subQuForm"].validate(valid => {
        if (valid) {
          if (this.formData.subId != null) {
            updateSubjective(this.formData).then(res => {
              this.$message({
                message: "修改成功",
                type: "success"
              });
              this.close();
            });
          } else {
            addSubjective(this.formData).then(res => {
              this.$message({
                message: "新增成功",
                type: "success"
              });
              this.close();
            });
          }
        }
      });
    },
    change() {
      this.formData.subTag = this.subTags.join(",");
    }
  },
  watch: {
    subInfo: {
      handler: function(newVal, oldVal) {
        if (newVal != null) {
          this.formData = newVal;
          this.subTags = newVal.subTag.split(",");
        }
      }
    }
  }
};
</script>
    <style>
.el-rate {
  display: inline-block;
  vertical-align: text-top;
}
</style>
    